<script setup>
    import {ref} from 'vue';
    const imgList = [
        'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-00.gif',
        'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-01.gif',
        'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-02.gif',
        'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-03.gif',
        'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-04.png',
        'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-05.png'
    ]

    // 下标
    const index = ref(0)
</script>
<template>
    <div>
        <button v-if="index > 0" @click="index--">上一页</button>
    </div>
    <img :src="imgList[index]" alt="img">
    <div>
        <button v-if="index < imgList.length - 1" @click="index++">下一页</button>
    </div>
</template>

        

<style>
    #app {
        display: flex;
        width: 500px;
        height: 240px;
    }

    img {
        width: 240px;
        height: 240px;
    }
    #app div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>